/*************************\
         CSS Reset 
\*************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}





/*************************\
         Defaults 
\*************************/

html, body {
    height:100%;
    margin:0;
    padding:0;
}

body {
  background:#191919;
  background:#090909;
  color:#555;
  font-family: /*Georgia,*/ 'Quattrocento Sans', serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.019em;
  word-spacing: 0em;
  line-height: 21px;
  overflow-y:scroll;
}

#container {
    width:890px;
    margin:0 auto;
    padding:0px;
    height:100%;
    position:relative;
    min-height:550px;
}

.fixed {
    position:fixed;
    height:100%;
}

::selection {
    background:#A84345; /* Safari */
    color:#fff;
}

::-moz-selection {
    background:#A84345; /* Firefox */
    color:#fff;
}

h1, h2, h3, h4 {
    font-family: 'Vollkorn', serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 1.2;
    xcolor:#333;
    color:#771314;
    color:#5E0909;
    xcolor:#fff;
}

h1 {
    font-size: 36px;
    text-shadow:0 0 1px #916E6E;
}

h2 {
    font-size:22px;
    text-shadow:0 0 1px #D8C5C5;
}

h3 {
    font-size:18px;
    xtext-shadow:0 0 1px #D8C5C5;
}

p, ul, ol, blockquote, pre {
    margin-bottom:1em;
}

ul li {
    margin-left:30px;
    list-style-type:disc;
}

ol li {
    margin-left:30px;
    list-style-type:decimal;
}

blockquote {
    xmargin:10px 0;
    padding:10px;
    background:rgba(225, 225, 225, 0.5);
}

a {
    color:#aa1b1f;
}

a:hover {
    color:#E52427;
}

h1 a {
    color:inherit;
    text-decoration:none;
}

h1 a:hover {
    color:inherit;
    text-decoration:none;
}

strong {
    font-weight:bold;
    color:#191919;
    xfont-family:'Volkorn';
}

em {
    font-style:oblique;
    font-family:'Volkorn';
    xfont-size:smaller;
    xfont-variant:small-caps;
    xcolor:#191919;
}

pre {
    font-family: Consolas, Monospace;
    margin:10px 0;
    padding:10px;
    background:rgba(225, 225, 225, 0.5);    
}

abbr, acronym {
    border-bottom:1px dotted;
    cursor:help;
}

.clear-fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}




/*************************\
         Content 
\*************************/

#content {
    padding: 0 20px;
    min-height:100%;
}

.margin-fix {
    padding:1px 0px;
    padding-top:30px;
}

#content img {
    max-width:100%;
    border:10px solid white;
    border-radius:5px;
    box-shadow:0 0 5px 0 #000;
    margin:20px;
}

#content img.right {
    float:right;
    margin-right:0px;
}

#content img.left {
    float:left;
    margin-left:0px;
}

#content img.full {
    margin:20px auto;
    display:block;    
}




/*************************\
          Scroll 
\*************************/

#scroll {
    width:30px;
    position:absolute;
    height:100%;
    left:885px;
    top:0px;
}

#scroll a  {
    position:absolute;    
    font-size:12px;
    text-transform:uppercase;
    color:#aaa;
    text-decoration:none;
    display:block;
    display:none;
    line-height:16px;
    width:26px;
    height:16px;
    background-image:url(/Content/img/sprites.png);    
}

#scroll a:hover {
    color:#fff;
}

#scroll a#previous {
    background-position:-120px -40px;
    top:16px;
}

#scroll a#previous:hover {
    background-position:-120px 0px;
}

#scroll a#next {
    background-position:-160px -40px;
    bottom:16px;
}

#scroll a#next:hover {
    background-position:-160px 0px;
}

#scroll a:after, #scroll a:before {
	width:100px;
	display:block;
	position:absolute;
	height:14px;
}

.csstransforms #scroll a:after, .csstransforms #scroll a:before {
    -webkit-transform-origin: 0 0;
    -webkit-transform:rotate(90deg);
    -moz-transform-origin: 0 0;
	-moz-transform:rotate(90deg);	
    -o-transform-origin: 0 0;
	-o-transform: rotate(90deg);
    -ms-transform-origin: 0 0;
	-ms-transform: rotate(90deg);
	left:21px;  
}

#scroll a#previous:after {
    content:'Previous post';
    top:20px;
}

#scroll a#next:before {
    content:'Next post';
    bottom:22px;
}

.csstransforms #scroll a#next:before {
    bottom:104px;
    text-align:right;
}



/*************************\
          Sidebar          
\*************************/

#sidebar {
    position:absolute;
    left:10px;
    color:#aaa;
    height:100%;
    width:192px;
    line-height:1.2;
    xtext-shadow: 0px 0px 3px #000;
    min-height:500px;
}

/* Header */

#header {
    margin-top:30px;
    width:193px;
}

#header h1, 
#header h2 {
    border:none;
    margin:0;
    color:#fff;
    text-shadow: 0px 0px 1px #fff, 0px 0px 3px #000;
}

#header h1 a,
#header h2 a {
    color:#fff;
    text-decoration:none;
}

#tagline {
    font-size:12px;
    text-transform:uppercase;
    text-shadow: 0px 0px 3px #000;
    width:100%;
    text-align:center;
}

#tagline a {
    color:#aaa;
    text-decoration:none;
}

#tagline a:hover,
#tagline a.hover,
#tagline .selected {
    color:#fff;
}

/* Navigation */

#nav {
    margin-top:30px;
}

#nav > li {
    list-style:none;
    border-bottom:1px solid #333;
    margin:0px 0px;
    position:relative;
}

#nav > li:first-of-type {
    border-top:1px solid #333;
}

#nav > li > a {
    display:block;
    padding:10px;
    color:#aaa;
    text-decoration:none;
    position:relative;
}

#nav > li.selected, 
#nav > li > a:hover, 
#nav li > a.hover {
    background:#050505;
    padding:10px;
}

#nav h2 {
    color:#aaa;
    font-size:20px;
    font-weight:normal;
    margin-right:30px;
}

#nav > li.selected h2, 
#nav > li > a:hover h2,
#nav li > a.hover h2 {
    color:#fff;
}

#nav p {
    font-size:12px;
    color:#888;
    margin-bottom:0;
    margin-right:30px;
}

#nav > li.selected p, 
#nav > li > a:hover p,
#nav li > a.hover p {
    color:#aaa;
}

#nav > li div {
    position:absolute;
    right:10px;
    top:21px;
    height:30px;
    width:20px;
    background:url(/Content/img/sprites.png) 0 0 no-repeat;
}

#nav > li#code div {
   background-position:0 -40px; 
}

#nav > li#code.selected div, 
#nav > li#code a:hover div,
#nav > li#code a.hover div {
   background-position:0 0; 
}

#nav > li#music div {
   background-position:-40px -40px; 
}

#nav > li#music.selected div, 
#nav > li#music a:hover div,
#nav > li#music a.hover div {
   background-position:-40px 0; 
}

#nav > li#philosophy div {
   background-position:-80px -40px; 
}

#nav > li#philosophy.selected div, 
#nav > li#philosophy a:hover div,
#nav > li#philosophy a.hover div {
   background-position:-80px 0; 
}

#nav > li > ul {
    padding:0;
    margin:0;
    padding-top:0px;
    color:#aaa;
    margin-top:10px;
    padding-top:10px;
    padding-bottom:0;
    padding-left:0px;
    border-top:1px dashed #333;
}

#nav > li > ul > li {
    margin:0;
    padding:0;
    list-style:none;
    background:url(/Content/img/sprites.png) -200px -37px no-repeat;
    margin-left:0px;
    padding-left:10px;
}

#nav > li > ul > li a {
    display:block;
    color:#aaa;
    text-decoration:none; 
}

#nav > li > ul > li a:hover {
    color:#fff;
}

#nav > li > ul > li.selected, 
#nav > li > ul > li:hover {
    color:#fff;
    background-position:-200px 3px;
}

/* Contact */

#contact h3 {
    font-family: 'Quattrocento Sans', serif;
    font-size:12px;
    text-transform:uppercase;
    color:#aaa;
    margin-bottom:10px;
}

#contact {
    position:absolute;
    bottom:30px;
    margin:0;
    padding:0;
}

#contact ul > li {
    margin:0;
    padding:0;
    margin-left:10px;
    float:left;
    list-style:none;
}

#contact ul > li:first-of-type {
    margin-left:0;
}

#contact a {
    display:block;
    width:30px;
    height:30px;
    border-radius:5px;
    text-decoration:none;
    background-image: url(/Content/img/sprites.png);
    background-position:0px 0px;
    background-repeat: no-repeat;
    background-color:#aaa;
    text-indent:-3000em;
}

#contact a:hover {
    background-color:#fff;
    box-shadow: 0px 0px 5px 0 #000;
}

#contact #email  {
    background-position:0px -120px;
}

#contact #email:hover {
    background-position:0px -80px;
}

#contact #twitter {
    background-position:-40px -120px;
}

#contact #twitter:hover {
    background-position:-40px -80px;
}

#contact #facebook {
    background-position:-80px -120px;
}

#contact #facebook:hover {
    background-position:-80px -80px;
}

#contact #stackoverflow {
    background-position:-120px -120px;
}

#contact #stackoverflow:hover {
    background-position:-120px -80px;
}

#contact #google-code {
    background-position:-160px -120px;
}

#contact #google-code:hover {
    background-position:-160px -80px;
}



 
/*************************\
           Post 
\*************************/

html.post #content {
    width:600px;
    padding:0px 20px 0px 20px;
    xheight:100%;
    position:absolute;
    left:230px;
    overflow:auto;
    border-left: 1px solid #333;
    border-right:1px solid #333;
    xoverflow-y:scroll;
    xbackground:#fff url(/Content/img/pb-05.jpg);
    background:#fff;
}

.shadow-left {
    background:url(/Content/img/shadow-left.png) repeat-y;
    position:absolute;
    left:231px;
    width:20px;
    height:100%;
}

.shadow-right {
    background:url(/Content/img/shadow-right.png) repeat-y;
    position:absolute;
    left:851px;
    width:20px;
    height:100%;
}

html.post #content h1 {
    margin-top:70px;
}

html.post #content h1:first-of-type {
    margin-top:0px;
}

html.post #content iframe {
    max-width:100%;
    border:10px solid white;
    border-radius:5px;
    box-shadow:0 0 5px 0 #000;
    margin:20px;
}

.post-body {
    padding-bottom:20px;
    border-bottom:1px dashed #771314;
}

.post-info {
    color:#999;
    text-align:right;
    text-transform:uppercase;
    font-size:12px;
    padding-top:10px;
}

.post-date {
    color:#A57878;
    text-align:left;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:2em;
}

#comments {
    padding-top:20px;
}

#comments > ol {
    margin:0;
    padding:0;
    counter-reset:comments 0;
    margin-bottom:20px;
}

#comments > ol > li {
    margin:0;
    padding:0;
    list-style:none;
    padding:10px;
    margin-top:20px;
    background:rgba(225, 225, 225, 0.5);
    margin-bottom:20px;
    counter-increment:comments 1;
    position:relative;
    min-height:50px;
}

#comments > ol > li:nth-child(odd) {
    background:rgba(190, 190, 190, 0.5);
}

#comments > ol > li:before {
    float:right;
    margin:10px;
    margin-right:0px;
    content: counter(comments, decimal);
    color:#fff;
    font-family: 'Vollkorn', serif;
    font-size:50px;
}

.comment-date {
    color:#912424;
    text-align:left;
    font-size:12px;
    margin-bottom:1em;
}

#comments > ol > li:nth-child(6) {
    background:rgba(0, 0, 0, 0.8);
    color:#fff;
}

#comments > ol > li:nth-child(6) h3 {
    color:#fff;
}

#comments > ol > li:nth-child(6) .comment-date {
    color:#aaa;
}

#comments > ol > li:nth-child(6) a {
    color:#aaa;
}

#comments > ol > li:nth-child(6) a:hover {
    color:#fff;
}

.no-comments {
    margin-bottom:20px;
}

#add-comment {
    border-top:1px dashed #771314;
    padding-top:20px;
}

form {
    margin-bottom:20px;
    display:block;
    margin-top:10px;
    position:relative;
}

#comment-form {
    background:rgba(225, 225, 225, 0.5);
    padding:10px;   
}

form label {
    display:block;
    margin-top:20px;
}

form label:first-of-type {
    margin-top:0;
}

form input, form textarea {
    width:300px;
    margin:0px;
    margin-left:0;
    margin-top:0;
    border-top:1px solid #bbb;
    border-left:1px solid #bbb;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee;
}

form textarea {
    height:200px;
    width:100%;
}

form .long {
    width:100%;
}

form .button {
    margin:0;
    margin-top:10px;
    padding:3px 10px;
    width:auto;
    clear:both;
    float:right;
    background:#f9f9f9;
    color:#912424;
    border-radius:2px;
    font-family: 'Quattrocento Sans', Georgia, serif;
    font-size: 15px;
    border:1px solid #ccc;
    border-radius:5px;
    cursor:pointer;
}

form .button:hover,
form .button:active {
    background:#ecdbdb;   
    background:#fff; 
}

#recaptcha_widget_div {
    border-top:1px solid #bbb;
    border-left:1px solid #bbb;
    border-right:1px solid #eee;
    border-bottom:1px solid #eee;
    background:#fff;
    width:318px;
    height:130px;
}

.mandatory:after {
    content:'*';
    color:#5e0909;
    margin-left:5px;
}

#mandatory-key {
    margin-top:15px;
    margin-bottom:0;
}

#mandatory-key span {
    color:#5e0909;    
    margin-right:5px;
}

.validation-summary-valid {
    display:none;
}

.validation-summary-errors, .field-validation-error {
    background:#e5c5c5;
    padding:5px;
}

.validation-summary-errors {
    margin-bottom:10px;
}

.validation-summary-errors ul {
    margin-top:10px;
    margin-bottom:0;
}

.field-validation-error {
    margin-top:5px;
    margin-bottom:0px;
    display:block;
}

/*************************\
           Home 
\*************************/

html.home #container {
    width:880px;
}

html.home #content {
    width:665px;
    padding:0px;
    height:100%;
    position:absolute;
    left:215px;
    xoverflow-y:scroll;
    xbackground:#090909;
    overflow:visible;
    border:0;
}

#home-intro {
    color:#fff;
    position:absolute;
    xwidth:200px;
    top:392px;
    left:-224px;
    top:40px;
    left:40px;
}

.home-div {
    xbackground:#fff;
    border-radius:5px;
    padding:10px;
    x-moz-box-shadow: inset 1px 1px 5px;
    color:#aaa;
    width:280px;
    xtext-align:justify;
}

.home-div h2 {
    color:#fff;
    xtext-shadow:none;
    float:left;
    padding-top:10px;
    xmargin-bottom:5px;
}

.home-div h2 a,
.home-div h2 a:hover {
    color:#fff;
    text-decoration:none;
}

.home-div:before {
    display:block;
    float:left;
    width:25px;
    height:30px;
    background:url(/Content/img/sprites.png) no-repeat;
    content:' ';
}

.home-div p {
    clear:left;
    margin-bottom:0;
}

#home-code {
    position:absolute;
    top:97px;
    left:30px;
    xbackground:url(/Content/img/code-back.png) 100px 10px no-repeat;
}

#home-code:before {
    margin-top:3px;
    background-position:0px 0px;
}

#home-philosophy {
    position:absolute;
    top:200px;
    right:0px;
    xbackground:url(/Content/img/philosophy-back.png) 100px 20px no-repeat;
}

#home-philosophy:before {
    background-position:-80px 0px;
}

#home-music {
    position:absolute;
    top:357px;
    left:30px;
    xbackground:url(/Content/img/music-back.png) 60px 20px no-repeat;
}

#home-music:before {
    background-position:-40px 0px;
}

#home-philosophy:hover, 
#home-philosophy.hover, 
#home-music:hover, 
#home-music.hover, 
#home-code:hover,
#home-code.hover {
    xcolor:#191919;
    background:#050505;
}

#home-photo {
    margin:0;
    float:right;
    position:absolute;
    top:110px;
    left:-3px;
    padding:10px;
    border-radius:5px;
    background:#fff;
}

#home-me-arrow {
    background:url(/Content/img/home-me-arrow.png) no-repeat;
    width:64px;
    height:59px;
    position:absolute;
    top:334px;
    left:50px;
    xdisplay:none;
}

#me {
    position:absolute;
    top:367px;
    left:33px;
    color:#aa1b1f;
    xdisplay:none;
}



/*************************\
          Admin 
\*************************/

html.admin, html.admin body, html.admin #container, html.admin #content {
    height:inherit;
    min-height:0;
    background:#fff;
}

html.admin #header-container {
    background:#090909;
}

html.admin #header {
    width:880px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

html.admin #header h1 {
    margin-top:30px;
}

html.admin #header h2 {
    position:absolute;
    bottom:5px;
    right:0px;
}

html.admin #header p {
    position:absolute;
    top:5px;
    right:0px;
    color:#fff;
}

html.admin #header a {
    color:#fff;
}

html.admin #container {
    padding: 0 10px;
    margin-top:30px;
}

html.admin #content {
    padding:0;
}

html.admin .post-date {
    margin:0;
}

html.admin .actions {
    margin-bottom:30px;
}

html.admin #content h1 {
    margin-bottom:10px;
    margin-top:30px;
}

html.admin #content h2 {
    margin-top:30px;
}

html.admin ul, html.admin li {
    margin:0;
    padding:0;
}

html.admin li {
    list-style:none;
}




/*************************\
          Errors 
\*************************/

html.error, html.error body, html.error #container, html.error #content {
    height:inherit;
    min-height:0;
    background:#090909;
}

html.error #header-container {
    background:#090909;
}

html.error #header {
    width:880px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

html.error #header h1 {
    margin-top:30px;
}

html.error #header a {
    color:#fff;
}

html.error #container {
    padding: 0 10px;
    margin-top:30px;
}

html.error #content {
    padding:0;
}

html.error #content img {
    margin:0;
    float:left;
    margin-left:-5px;
}

html.error #content h1 {
    border:none;
    margin:0;
    color:#fff;
    text-shadow: 0px 0px 1px #fff, 0px 0px 3px #000;
}

html.error #content p {
    color:#aaa;
}

html.error #content #error {
    margin-left:50px;
    float:left;
}


/*************************\
        HTML Editor 
\*************************/

.html-content {
    margin:10px 0;
    position:relative;    
    width:100%;
    xheight:337px;
}

.html-content-text {
    xdisplay:none;
    width:100%;
    height:337px;
}

.html-content-loader {
    border:1px solid #d3d3d3;
    -moz-border-radius:5px;    
    position:absolute;
    height:337px;
    top:0;
    left:0;
    right:0;
    z-index:-1;
}

.html-content-loader-text {
    margin:20px;
}

@media all and (max-width:970px) {
    #scroll {
        display:none;
    }
}

@media all and (max-width:906px) {
    .fixed {
        position:absolute;
    }
    
    #content {
        height:100%;
    }
    
    .shadow-right {
        left:834px;
        background-image:url(/content/img/shadow-right-scroll.png);
    }
    
    body {
        overflow-y:hidden;
    }
}